<template>
  <div class="ccqk-root">
    <base-table-detail :table-column="tableColumn" :form-filed="formFiled" :mid="mid" :query-list-action="queryListAction" :rules="rules"
                       :submit-data-action="submitDataAction" :submit-before-action="submitBeforeAction" :load-list-before="loadListBefore">

      <template v-slot:form-item>
        <el-form-item label="除草时间" prop="weedingDate">
          <el-date-picker
            size="mini"
            v-model="formFiled.weedingDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="除草方式" prop="type">
          <el-select v-model="formFiled.type" placeholder="请选择" clearable size="small">
            <el-option
              v-for="dict in typeDict"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="除草方式描述" prop="remark">
          <el-input v-model="formFiled.remark"></el-input>
        </el-form-item>

        <el-form-item label="除草剂" prop="herbicide" v-show="formFiled.type==3">
          <el-input v-model="formFiled.herbicide"></el-input>
        </el-form-item>
        <el-form-item label="施用日期" prop="useDate" v-show="formFiled.type==3">
          <el-date-picker
            size="mini"
            v-model="formFiled.useDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="施用面积(亩)" prop="useArea" v-show="formFiled.type==3">
          <el-input type="number" v-model="formFiled.useArea"></el-input>
        </el-form-item>

        <el-form-item label="施用剂量" prop="useDose" v-show="formFiled.type==3">
          <el-input type="number" v-model="formFiled.useDose"></el-input>
        </el-form-item>


        <el-form-item label="施用方法" prop="useActive" v-show="formFiled.type==3">
          <el-select v-model="formFiled.useActive" placeholder="请选择" clearable size="small">
            <el-option
              v-for="dict in useActiveDict"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="时效性" prop="timeliness" v-show="formFiled.type==3">
          <el-select v-model="formFiled.timeliness" placeholder="请选择" clearable size="small">
            <el-option
              v-for="dict in timelinessDict"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="对植株影响" prop="influenceDegree" v-show="formFiled.type==3">
          <el-select v-model="formFiled.influenceDegree" placeholder="请选择" clearable size="small">
            <el-option
              v-for="dict in influenceDegreeDict"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="影响部位" prop="influenceParts" v-show="formFiled.type==3">
          <el-select v-model="formFiled.influenceParts" placeholder="请选择" clearable size="small">
            <el-option
              v-for="dict in influencePartsDict"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="植株产生效果" prop="produceEffect">
          <el-input v-model="formFiled.produceEffect"></el-input>
        </el-form-item>
        <el-form-item label="除草前" prop="ccq">
          <upload-image :limit="1" v-model="formFiled.ccq"></upload-image>
        </el-form-item>
        <el-form-item label="除草过程" prop="ccgc">
          <upload-image :limit="1" v-model="formFiled.ccgc"></upload-image>
        </el-form-item>
      </template>
    </base-table-detail>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import baseTableDetail from '../components/baseTableDetail'
  import { weedingEdit, weedingList } from '@/api/industry/cpf'
  import { getDicts } from '@/api/system/dict/data'
  import uploadImage from '@/components/UploadImage'

  export default {
    name: 'ccqk',
    props: {
      mid: {
        type: [String, Number],
        default: 1
      }
    },
    components: {
      uploadImage,
      baseTableDetail
    },
    setup(props, content) {
      let data = reactive({
        tableColumn: [
          { name: '除草时间', prop: 'weedingDate' },
          { name: '除草方式', prop: 'type' },
          { name: '除草方式描述', prop: 'remark' },
          { name: '除草剂', prop: 'herbicide' },
          { name: '施用日期', prop: 'useDate' },
          { name: '施用面积', prop: 'useArea' },
          { name: '施用剂量', prop: 'useDose' },
          { name: '施用方法', prop: 'useActive' },
          { name: '时效性', prop: 'timeliness' },
          { name: '对植株影响', prop: 'influenceDegree' },
          { name: '影响部位', prop: 'influenceParts' },
          { name: '植株产生效果', prop: 'produceEffect' },
          {
            name: '操作',
            prop: 'operation',
            type: 'slot',
            width: 100
          }],
        rules: {},
        queryListAction: weedingList,
        submitDataAction: weedingEdit,
        formFiled: {
          weedingDate: null,
          type: null,
          remark: null,
          herbicide: null,
          useDate: null,
          useArea: null,
          useDose: null,
          useActive: null,
          timeliness: null,
          influenceDegree: null,
          influenceParts: null,
          produceEffect: null,
          ccq: [],
          ccgc: []
        },
        typeDict: [],
        useActiveDict: [],
        timelinessDict: [],
        influenceDegreeDict: [],
        influencePartsDict: []
      })

      const loadDict = async() => {
        let response = await Promise.all([
          getDicts('fil_weeding_type'),
          getDicts('fil_weeding_use_active'),
          getDicts('fil_weeding_timeliness'),
          getDicts('fil_influence_degree'),
          getDicts('fil_influence_parts')
        ])
        let [{ data: typeDict },
          { data: useActiveDict },
          { data: timelinessDict },
          { data: influenceDegreeDict },
          { data: influencePartsDict }
        ] = response
        data.typeDict = typeDict
        data.useActiveDict = useActiveDict
        data.timelinessDict = timelinessDict
        data.influenceDegreeDict = influenceDegreeDict
        data.influencePartsDict = influencePartsDict

      }

      const loadListBefore = async(response) => {
        await loadDict()
        response.rows.map(item => {
          if (item.type != null) {
            console.log(item.type, data.typeDict, data)
            item.type = data.typeDict.find(el => item.type == el.dictValue).dictLabel
          }
          if (item.useActive != null) {
            item.useActive = data.useActiveDict.find(el => item.useActive == el.dictValue).dictLabel
          }
          if (item.timeliness != null) {
            item.timeliness = data.timelinessDict.find(el => item.timeliness == el.dictValue).dictLabel
          }
          if (item.influenceDegree != null) {
            item.influenceDegree = data.influenceDegreeDict.find(el => item.influenceDegree == el.dictValue).dictLabel
          }
          if (item.influenceParts != null) {
            item.influenceParts = data.influencePartsDict.find(el => item.influenceParts == el.dictValue).dictLabel
          }
          return item
        })
        return response
      }

      const submitBeforeAction = (requestData) => {
        let req = JSON.parse(JSON.stringify(requestData))
        req.photos = [{ type: 1, ...req.ccq[0] }, { type: 2, ...req.ccgc[0] }]
        if (req.type != 3) {
          delete req.herbicide
          delete req.useArea
          delete req.useDose
          delete req.useActive
          delete req.timeliness
          delete req.influenceDegree
          delete req.influenceParts
        }
        return req
      }
      onMounted(() => {
      })
      return { ...toRefs(data), submitBeforeAction, loadListBefore }
    }
  }
</script>

<style scoped lang="scss">
  .ccqk-root {

  }
</style>
